<template>
    <div>
      <div v-if="isRouterView" class="pageBox">
        <div class="pageLeft" v-if="isLeftBox">
          <CalendarRouterView />
        </div>
        <div :class="[isLeftBox ? 'pageRight' : 'pageRight1']">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </div>
      <div v-else class="pageBox">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </template>
  
  <script setup lang='ts'>
import CalendarRouterView from './components/calendar-router-view.vue';
  const isLeftBox = ref(true);
  const route = useRoute();
  const router = useRouter();
  const isRouterView = ref(true);
  watch(
    () => route,
    (newVal, oldVal) => {
      // 在这里处理路由变化的逻辑
      // console.log('Route changed from', oldVal, 'to', newVal.path);
      if (newVal.path == '/calendar/index/myCalendar') {
        isRouterView.value = false;
      } else {
        isRouterView.value = true;
      }
    },
    { deep: true, immediate: true }
  );
  </script>
  <style scoped lang="scss">
  .pageBox {
    display: flex;
    width: 100%;
    height: calc(100vh - 50px);
    .pageLeft {
      padding-top: 12px;
      width: 200px;
      height: 100%;
      border-right: 1px solid #eee;
      overflow-y: auto;
    }
    .pageRight {
      width: 100%;
      position: relative;
    }
    .pageRight1 {
      width: 100%;
      position: relative;
    }
    .packUpBtn {
      position: absolute;
      width: 15px;
      height: 35px;
      line-height: 38px;
      text-align: center;
      background-color: #8ab9ff;
      left: 0;
      bottom: 40px;
      z-index: 1000;
      font-size: 10px;
      color: #ffffff;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
      &:hover {
        // background-color: #d6d6d6;
      }
    }
  }
  </style>
  